<template>
  <view class="bgf br-8 p-8">
    <view class="disFlxJS mb-8">
      <text class="default-color fz-14 linh-20">
        {{ moduleTypeTextMap[cloneModule.moduleType || ModuleTypeEnum.LargeImage] }}
      </text>
      <view class="disFlx p-8 gap-10">
        <TButton
          text="上移"
          type="none"
          :customStyle="{
            backgroundColor: '#F2F3F5',
            color: `${!index ? '#CCCCC8' : '#333'}`,
          }"
          :disabled="!index"
          custom-class="h-20 w-40 linh-20"
          @click="emits('top')"
        />

        <TButton
          text="下移"
          type="none"
          :customStyle="{
            backgroundColor: '#F2F3F5',
            color: `${index + 1 == length ? '#CCCCC8' : '#333'}`,
          }"
          :disabled="index + 1 == length"
          custom-class="h-20 w-40 linh-20"
          @click="emits('down')"
        />

        <TButton
          text="置顶"
          type="none"
          :customStyle="{
            backgroundColor: '#F2F3F5',
            color: `${!index ? '#CCCCC8' : '#333'}`,
          }"
          :disabled="!index"
          custom-class="h-20 w-40 linh-20"
          @click="emits('topping')"
        />

        <TButton
          text="删除"
          type="none"
          :customStyle="{
            backgroundColor: '#F2F3F5',
            color: '#333',
          }"
          custom-class="h-20 w-40 linh-20"
          @click="emits('delete')"
        />
      </view>
    </view>
    <view v-if="cloneModule.moduleType == ModuleTypeEnum.LargeImage">
      <view
        v-for="(url, index) in cloneModule.fileUrls"
        :key="index"
        @click="previewImage(url as string)"
      >
        <t-image :src="url" width="100%" border-radius="8px"></t-image>
      </view>
    </view>
    <view v-else-if="cloneModule.moduleType == ModuleTypeEnum.SmallImage">
      <ImgUpload
        :row="3"
        :limit="9"
        width="212rpx"
        height="212rpx"
        v-model="cloneModule.fileUrls"
      ></ImgUpload>
    </view>
    <view v-else-if="cloneModule.moduleType == ModuleTypeEnum.Video">
      <video
        id="video"
        :src="cloneModule.fileUrls![0]"
        class="br-8"
        style="width: 100%; height: 320rpx"
      ></video>
    </view>
    <view v-else-if="cloneModule.moduleType == ModuleTypeEnum.Text">
      <FormInput
        v-model:model-value="cloneModule.text"
        :placeholder="`请输入${boType === BoTypeEnum.Supply ? '供应' : '需求'}内容的详细介绍`"
        autoHeight
        :maxlength="1000"
        type="textarea"
        :font-size="28"
        :transparent="true"
      />
    </view>
    <view class="disFlxJC pt-12">
      <TButton
        text="插入项目内容"
        type="none"
        :icon="'\ue727'"
        :customStyle="{
          backgroundColor: '#F2F3F5',
          color: '#333',
          width: '272rpx',
          height: '64rpx',
          lineHeight: '64rpx',
        }"
        @click="emits('add')"
      />
    </view>
  </view>
</template>

<script lang="ts" setup>
  import ImgUpload from '@/components/Form/components/upload/FormUploadFile.vue';
  import {
    ModuleTypeEnum,
    moduleTypeTextMap,
    type IEditBusinessOpportunitiesDetailEnum,
  } from '@/enums/editBusinessOpportunitiesDetailEnum';
  import { cloneDeep } from 'lodash-es';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { ref, watch, type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import FormInput from '@/components/Form/components/FormInput.vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  const props = defineProps({
    module: {
      type: Object as PropType<IEditBusinessOpportunitiesDetailEnum>,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
    },
    length: {
      type: Number,
      default: 0,
    },
    boType: {
      type: Number as PropType<BoTypeEnum>,
      default: BoTypeEnum.Supply,
    },
  });
  const cloneModule = ref(cloneDeep(props.module));

  const emits = defineEmits([
    'top',
    'down',
    'sort-frest',
    'topping',
    'add',
    'delete',
    'update:module',
  ]);

  watch(
    cloneModule,
    () => {
      emits('update:module', cloneModule.value);
    },
    { deep: true, immediate: true },
  );

  function previewImage(url: string) {
    uni.previewImage({
      current: url,
      urls: [url],
    });
  }
</script>

<style lang="scss" scoped></style>
